<template>
    <div class="menu">
        <div class="menu-top">
            <span class="title">流行菜单</span>
           <router-link to="#" class="title2">全部</router-link>
        </div>
        <div class="menu-box">
            <div class="menu-lis">
                <router-link to="#" class="menu-a" v-for="(item,index) in list" :key="index">
                    <img :src="item.imgSrc" alt="">
                    <p class="menu-p">{{item.name}}</p>
                </router-link>
                <img src="https://unmc.cdn.bcebos.com/1612195039067_1597945114.png" alt="">
            </div>
            
        </div>
    </div>
</template>

<script>
import axios from "axios"
export default {
    name: 'Menuitem',

    data() {
        return {
            list:[]
        };
    },

    mounted() {
        
    },
    created() {
        this.fn_data()
    },
    methods: {
      async fn_data(){
            let {data} = await axios.get("https://mock.presstime.cn/mock/61be971690bfb20016179287/muen/liuxing")
            console.log(data)
            this.list=data.data.list
        }
    },
};
</script>

<style lang="less" scoped>
.menu{
    width: 300px;
    padding-left: 33.33px;
}
.menu-top{
    display: flex;
    justify-content: space-between;
    margin:15px 0 15px 0;
}
.title{
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #c0ae7d;
}
.title2{
    color: red;
    float: right;
    font-size: 14px;
}
.title2:hover{
    background: red;
    color:#fff;
}

.menu-a{
    display:inline-block;
    width: 300px;
    height: 195px;
    border: 1px solid #f1f1f1;
    margin-bottom:10px;
}
.menu-p{
    padding: 14px 10px;
    font-size: 16px;
    text-align: center;
}
</style>